How to work with Styles XAML in Xamarin Forms

Very often we need to create the same styles for differents visual controls and we have to repeat this code for each controls as we need. .. But what happend if we can create just one style for every control without code repetition..???…

In this post I’ll show you how you can create the following in XAML:

• Global Styles
• Explicit styles
• Implicit styles

But First.. What is a Style..? 

A style is a set of visual properties that are defined with the objective of assigning specific visual characteristics for as many controls as you want to set.

Creating a Global Style in XAML

To declare the global style, we need to open the file App.xaml from our project. Inside this file, specifically in Application.Resources tag, we’ll add the following tags:

✔ <ResourceDictionary>:Inside this tag we define the resources that we’ll use in some XAML files from our project. Normally we use it to define resources that we’ll be using more than once.

✔ <Style>:Defines the style for some specific control types. This property have two attributes that help us to define the style:

➖ Key:               It’s the name of the style.

➖ Target Type:  Defines the name of the control that will be getting the style.

✔ <Setter>: Set the properties that will get the control specified in the style. This tag have the following attributes:

➖ Property:   Define the property name that we want to add for the control.

➖ Value:         Define the value that will get the Property setted above.

Lets see an example:

And now.. How can I add this style to my XAML.. ??

To add this style in my XAML file, you need to set the StaticResource next to the style name in the style property in the control owner to the style. As I show bellow:

Example implementing style defined above:

Let’s see the result:

Explicit styles in XAML

With this style type, we can add in the XAML file as many styles as we want, just using the properties as I showed you above, with the ResourceDictionary but in this case you have to add the ResourceDictionary inside <ContentPage.Resources> tag. The most important for this type is that you have to add the x:Key attribute.

The difference between an App.xaml implementation and this, is that in that way we just have the style for a specific XAML and in the App.xaml implementation is for the entire project and can be accessed from any XAML file inside the project.

Let’s see an example:

Implicit styles in XAML

With this style type, you can add the styles just in the same way as the global and explicit styles but with the difference that you don’t have to call the StaticResource to  add the styles because this is applied to every control that automatically matches the TargetType that you setted in your style. This type have one important difference, you don’t need to add x:Key attribute.

Let’s see an example:

In this example I’ve created a style for every Labelscontrols on the page.

Let’s see the results:

Good luck with your implementation! ?

Spanish post:

https://medium.com/@reyes.leomaris/como-trabajar-con-estilos-en-xaml-para-xamarin-forms-3cae3cffe595

References:

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/styles/xaml/application 

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/styles/xaml/explicit

https://docs.microsoft.com/en-us/xamarin/xamarin-forms/user-interface/styles/xaml/implicit